<template>
  <div class="Usermain">
    <!-- 用户卡片 -->
    <div class="userInfo">
      <!-- 头像 -->
      <div class="headImg">
        <img
          src="https://s0.meituan.net/bs/fe-web-meituan/e3064a3/img/head-img.png"
          alt=""
        />
      </div>
      <!-- 用户信息 -->
      <div class="userCenter">
        <div class="userName">
          {{ userInfo.nickName }}
          <i
            class="iconfont vip"
            :class="`icon-vip${userInfo.growthLevel}`"
          ></i>
        </div>
        <div>我的余额：<span class="money">￥999999999999</span>充值卡充值</div>
      </div>
      <div class="setUserInfo" @click="goNavTarget('UserInfo')">
        个人信息设置<i class="iconfont icon-arrow-right"></i>
      </div>
    </div>
    <div class="userMenu" @click="goNavTarget">
      <div class="userMenulist" data-id="1">
        <i class="iconfont icon-orders" data-id="1"></i>
        全部订单
      </div>
      <div class="userMenulist" data-id="2">
        <i class="iconfont icon-pay" data-id="2"></i>
        待付款
      </div>
      <div class="userMenulist" data-id="3">
        <i class="iconfont icon-card" data-id="3"></i>
        待使用
      </div>
      <div class="userMenulist discuss" data-id="4">
        <i class="iconfont icon-message" data-id="4"></i>
        待评论
        <span class="discussCount">{{ props.ToCommentCount }}</span>
      </div>
      <div class="userMenulist" data-id="5">
        <i class="iconfont icon-money" data-id="5"></i>
        退款/售后
      </div>
    </div>
    <div class="like">
      <div class="title">
        <h2>猜你喜欢</h2>
        <span>为您甄选最合适的</span>
      </div>
      <div class="goodsList">
        <div
          class="goodsItem"
          v-for="goods in recommends"
          :key="goods.itemId"
          @click="toGoodsDetail(goods.itemId)"
        >
          <img class="goodsImg" v-lazy="goods.imgUrl" alt="" />
          <h3 class="goodsTitle">{{ goods.title }}</h3>
          <div class="goodscommentNum">
            <div class="goodsStartBottom">
              <i
                v-for="index of 5"
                :key="index"
                class="iconfont icon-start gray"
              ></i>
            </div>
            <div
              class="goodsStartTop"
              :style="'width:' + (goods.score * 100) / 5 + '%;'"
            >
              <i
                v-for="index of 5"
                :key="index"
                class="iconfont icon-start"
              ></i>
            </div>
            {{ goods.commentNum }}个评论
          </div>
          <div class="address">{{ goods.areaName }}</div>
          <span class="price"
            >￥
            <span class="price-number">{{ goods.lowPrice }}</span>
            起</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "myMeiTuan",
});
</script>

<script setup>
import { getRecommendsApi, getUserInfoApi } from "@/api/personal";
import { onMounted, ref, defineProps, defineEmits } from "vue";
import router from "../../../router";

// 用户数据
const userInfo = ref({});
onMounted(async () => {
  const userInfoData = await getUserInfoApi();
  userInfo.value = userInfoData;
});

// 猜你喜欢数据
const recommends = ref([]);
onMounted(async () => {
  const recommendsRes = await getRecommendsApi();
  console.log(recommendsRes);
  // 把图片地址进行修改
  // const recommendsNew = recommendsRes.data.map((item) => {
  //   const imgUrls = item.imgUrl.split("/w.h/");
  //   item.imgUrl = imgUrls[0] + "/" + imgUrls[1] + "@190w_106h_1e_1c";
  //   return {
  //     ...item,
  //   };
  // });
  recommends.value = recommendsRes;
});
const props = defineProps(["ToCommentCount"]);
// 点击导航栏跳转
const emit = defineEmits(["orderTarget"]);
const goNavTarget = (e) => {
  // console.log(e.target.dataset.id);
  if (e === "UserInfo") {
    console.log(111111);
    emit("orderTarget", ["UserInfo"]);
    return;
  }
  emit("orderTarget", ["myOrder", e.target.dataset.id]);
};
// 点击猜你喜欢调整转到产品详情
const toGoodsDetail = (itemId) => {
  console.log(itemId);
  // 根据产品id或者其他指定阐述传递请求跳转页面
  router.push({
    path: "/details",
    query: {
      poiId: itemId,
    },
  });
};
</script>
<style lang="less" scoped>
.Usermain {
  width: 980px;
  font-size: 14px;
  // 用户信息
  .userInfo {
    width: 100%;
    height: 209px;
    background: #ffd000;
    background-image: linear-gradient(to bottom right, #ffd000, #ffbd00);
    border-radius: 4px 4px 0 0;
  }
  .headImg {
    width: 110px;
    height: 110px;
    border: 10px solid rgba(248, 248, 248, 0.5);
    border-radius: 100%;
    position: relative;
    float: left;
    top: 38px;
    left: 30px;
  }
  .userCenter {
    float: left;
    color: #222222;
    position: relative;
    left: 51px;
    top: 70px;
    font-weight: 500;
    .userName {
      font-size: 26px;
      margin-bottom: 5px;
      color: #222222;
      .vip {
        font-size: 16px;
        background-color: black;
        color: white;
        border-radius: 3px;
      }
    }
    .money {
      padding: 0 10px;
    }
  }
  .setUserInfo {
    color: #222222;
    float: right;
    font-size: 14px;
    position: relative;
    left: -30px;
    top: 90px;
    .arrowRight {
      vertical-align: top;
      line-height: 5550px;
      width: 15px;
      height: 15px;
    }
  }
  // 菜单
  .userMenu {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    box-shadow: 0 0 20px rgb(155, 155, 155);
    .userMenulist {
      height: 110px;
      line-height: 110px;

      .iconfont {
        font-size: 40px;
        color: #ffa24b;
        vertical-align: middle;
      }
    }
    .discuss {
      position: relative;
      .discussCount {
        position: absolute;
        top: 23px;
        right: 20px;
        width: 40px;
        height: 20px;
        line-height: 20px;
        border-radius: 20px;
        text-align: center;
        border: 2px solid #ffffff;
        color: #ffffff;
        background-color: #ff4a4a;
      }
    }
  }
  // 猜你喜欢
  .like {
    margin-top: 25px;
    background-color: #fff;
    padding: 20px;
    // 标题
    .title {
      display: flex;
      height: 30px;
      h2 {
        margin: 0;
        font-size: 20px;
        color: #222222;
        font-weight: 500;
      }
      span {
        line-height: 30px;
        padding: 0 10px;
        font-size: 14px;
        color: #666;
        font-weight: 400;
      }
    }
    // 商品列表
    .goodsList {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // 单个商品
      .goodsItem {
        width: 220px;
        overflow: hidden;
        padding: 10px;
        margin: 10px 0;
        color: #999;
        &:hover {
          background-color: #f4f4f4;
          transition: background-color 0.5s;
        }
        .goodsImg {
          width: 210px;
          height: 120px;
          object-fit: cover;
        }
        // 商品标题
        .goodsTitle {
          font-size: 14px;
          color: #222222;
          line-height: 20px;
          width: 200px;
          margin: 10px 0;
          font-weight: 500;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        // 评价
        .goodscommentNum {
          // margin: 10px 0;
          width: 80px;
          position: relative;
          .goodsStartTop {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .icon-start {
          color: #ff6600;
          &.gray {
            color: gray;
          }
        }
        // 地址
        .address {
          margin: 10px 0;
        }
        // 价格
        .price {
          font-weight: 700;
          color: #ff6600;
          .price-number {
            font-weight: normal;
            font-size: 22px;
          }
        }
      }
    }
  }
}
</style>
